<template>
  <div class="catelog-container">
    <van-nav-bar class="page-nav-bar" title="分类" />
    <van-cell-group>
      <van-button
        class="search-btn"
        slot="title"
        type="info"
        size="small"
        align="center"
        round
        to="/search"
        icon="search"
        >商品搜索 共{{ goodsCount }}款好物</van-button
      >
    </van-cell-group>
    <div class="main">
      <van-sidebar v-model="activeKey"  @change="onChange" class="categorybox">
        <van-sidebar-item
          class="item"
          v-for="obj in categoryList"
          :key="obj.id"
          :title="obj.name"
        />
      </van-sidebar>
      <div class="catebox">
        <van-grid :border="false" :column-num="3" class="catelist">
          <van-grid-item
            v-for="obj in currentCategory"
            :key="obj.id"
            :to="'/goods?productCategoryId='+obj.id"
          >
            <van-image class="img" :src="obj.banner_url" />
            <span class="cname">{{ obj.name }}</span>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import { getCategoryTreeList  } from "@/api/goods";

export default {
  name:'Catalog',
  data() {
    return {
      activeKey: 0,
      categoryList: [],
      goodsCount: null,
      currentCategory: {},
    };
  },
  created() {
    this.initData();
  },
  methods: {
    // 初始化
    async initData(){
      this.categoryList = await getCategoryTreeList()
      this.currentCategory = this.categoryList[0]?.children || []
    },
    // 切换
    onChange(idx) {
      this.currentCategory = this.categoryList[idx]?.children || []
    },
  },
};
</script>

<style lang="less" scoped>
.search-btn {
  width: 100%;
  height: 64px;
  background-color: #ededed;
  color: #666;
  border: none;
  font-size: 28px;
  .van-icon {
    font-size: 32px;
  }
}
.main {
  display: flex;
  .categorybox {
    margin-top: 40px;
    .item {
      text-align: center;
      height: 100px;
    }
    .active {
      color: #ab2b2b;
      font-size:16px;
      border-left: 3 px solid #ab2b2b;
    }
  }
  .catebox {
    flex: 1;
    height: 1000px;
    .catelist {
      .img {
        width: 80px;
        height: 80px;
      }
      .cname {
        font-size: 20px;
      }
    }
  }
}
//设置
.van-sidebar-item--select {
  color: #ee0a24;
}
.van-sidebar-item--select::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px;
  height: 100px;
  background-color: #ee0a24;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  content: "";
}
</style>